include ../mixins/image.pug

style.
  .address-list-item {
    color: #1E2226;
    height: .6rem;
  }
  .address-list-item .hover-item {
    opacity: 0;
    pointer-events: none;
  }
  .address-list-item:hover .hover-item {
    opacity: 1;
    pointer-events: auto;
  }
  .address-list-indicator {
    opacity: 0;
  }
  .address-list-item[active] .address-list-indicator {
    opacity: 1;
  }
  .address-bak {
    background: rgba(246, 248, 251, 1);
  }
  .address-add {
    height: 1.28rem;
    background: rgba(246, 248, 251, 1);
  }


template#address-list-tpl
  div.address-list
    div.ui-flex.ui-items-center.ui-justify-between.address-list-item(v-for='(item, index) in data',
      :key="index", :active="index === activeIndex", @click="onItemTaped(index)")
      .ui-flex.ui-items-center
        .ui-flex.ui-items-center.address-list-indicator
          +simage('https://oss.kaoyanvip.cn/uploads/file1592089763240.png', '.18rem', '')
          div.text-color-danger(style="margin-left: .1rem") 寄送至
        u-trigger(style="margin-left: .3rem", :checked="index === activeIndex")
          template(slot="yes")
            +simage('https://oss.kaoyanvip.cn/uploads/file1592089930712.png', '.2rem')
          template(slot="no")
            +simage('https://oss.kaoyanvip.cn/uploads/file1592090029015.png', '.2rem')
        div(style="margin-left: .2rem") 东方董鸣华
        div(style="margin-left: .3rem") 12325462564
        div(style="margin-left: .3rem") 江苏省 苏州市 工业园区创意产业园6栋202
        u-trigger(style="margin-left: .3rem", :checked="item.is_default", class="hover-item")
          template(slot="yes")
            div.text-color-gray.ui-cus-pointer 默认收货地址
          template(slot="no")
            div.text-color-primary.ui-cus-pointer 设为默认收货地址
      .ui-flex.ui-items-center.hover-item
        div.text-color-primary.ui-cus-pointer(@click="editAddress(item, index, data)") 修改本地址

mixin address-header(title, subTitle)
  .ui-flex.ui-items-end.ui-line-height-1
    +simage('https://oss.kaoyanvip.cn/uploads/file1592616930380.png', '.04rem', '')
    div(style="width: .06rem") &nbsp;
    .bs-text-color-black.ui-bold.text-sz-400 #{title}
    div(style="width: .06rem") &nbsp;
    .text-color-danger.ui-bold.text-sz-100 #{subTitle}

mixin address-list-form()
  .ui-flex.ui-items-end.ui-justify-between
    +address-header("请选择教材寄送地址", "建议您填写常用地址，以便收货")
    .ui-flex.ui-items-center.ui-line-height-1
      +simage('https://oss.kaoyanvip.cn/uploads/file1592617413155.png', '.14rem')
      div(style="width: .06rem") &nbsp;
      .bs-text-color-black.ui-bold.text-sz-100 管理地址
  div(style="height: .2rem")
  .app-line
  div(style="height: .2rem")
  template(v-if="items && items.length > 0")
    u-address-list(:items="items")
    div(style="height: .2rem")
    .btn.btn-primary(style="width: 1.6rem; height: .4rem; line-height: .36rem;")
      .ui-flex.ui-items-center.ui-justify-center
        div +
        div.text-sz-300(@click="addAddress") 添加新地址
  template(v-else)
    .address-add.ui-relative
      .ui-poa-center-center
        .text-color-gray.text-sz-200.ui-center 暂时没有可用地址
        div(style="height: .1rem")
        .btn.btn-primary(style="width: 1.6rem; height: .4rem; line-height: .36rem;")
          .ui-flex.ui-items-center.ui-justify-center
            div +
            div.text-sz-300(@click="addAddress") 添加新地址


style.
  .address-table .address-table-item:nth-child(1) {
    width: 9.7rem;
  }
  .address-table .address-table-item:nth-child(2) {
    width: calc(100% - 9.7rem);
  }
  .address-tbody {
    height: 0.93rem;
    border: 0.01rem solid rgba(235, 235, 235, 1);
  }

mixin address-form-good()
  .ui-flex.ui-items-start.ui-justify-between
    +address-header("商品详情", "")
  div(style="height: .25rem")
  div
    .address-table
      .address-bak.ui-flex.ui-items-center(style='height: .48rem')
        .address-table-item.ui-center
          .bs-text-color-black.ui-bold.text-sz-100 订单详情
        .address-table-item.ui-center
          .bs-text-color-black.ui-bold.text-sz-100 商品金额
      .address-tbody
        div.ui-full-h.ui-flex.ui-items-center
          .address-table-item.ui-center
            .ui-flex.ui-items-center.ui-justify-between
              div(style="padding-left: .2rem")
                .ui-flex.ui-items-center
                  +simage('https://oss.kaoyanvip.cn/uploads/file1592619295523.png', '.16rem')
                  div(style="width: .04rem") &nbsp;
                  .bs-text-color-black.ui-bold.text-sz-400.ui-line-height-1 2020考研公共课名师全程班【数学三】(杨超独家主讲)
                div(style="height: .2rem")
                .ui-flex.ui-items-center
                  .text-color-gray.text-sz-100.ui-line-height-1 老师：张雪峰、徐涛、杨超、屠皓民
              div.ui-left-align.ui-line-height-1(style="padding-right: .5rem")
                .bs-text-color-black.text-sz-100 2020.03.01至2020.12.31
                div(style="height: .1rem")
                .bs-text-color-black.text-sz-100 总 624 课时
          .address-table-item.ui-center
            .ui-flex.ui-items-center
              div(style="width:0.01rem; height:0.71rem; background:rgba(220,220,220,1);")
              div.ui-flex-1.ui-line-height-1
                .text-color-gray.ui-bold.text-sz-100.ui-text-decoration-line-through ￥33965
                div(style="height: .1rem")
                .bs-text-color-black.ui-bold.text-sz-100 ￥11632

mixin address-form-coupon()
  .ui-flex.ui-items-start.ui-justify-between
    +address-header("优惠信息", "")
  div(style="height: .25rem")
  .address-bak(style="padding-left: .2rem; padding-right: .2rem;")
    .ui-flex.ui-items-center.ui-justify-between(style='height: .48rem')
      .address-table-item.ui-center
        .bs-text-color-black.ui-bold.text-sz-200 优惠券
      .address-table-item.ui-center
        .text-color-gray.text-sz-200 暂无可用优惠券
    .ui-flex.ui-items-center.ui-justify-between(style='height: .48rem')
      .address-table-item.ui-flex.ui-items-center.ui-relative
        +simage('https://oss.kaoyanvip.cn/uploads/file1592638490616.png', '.17rem')
        div(style="width: .06rem") &nbsp;
        .bs-text-color-black.ui-bold.text-sz-200.ui-line-height-1 优惠券
      .address-table-item.ui-flex.ui-items-center.ui-relative
        .bs-text-color-black.text-sz-200.ui-line-height-1 选择优惠券
        div(style="width: .06rem") &nbsp;
        u-trigger-radio(:checked="isOpenAction")
          template(slot="yes")
            +simage('https://oss.kaoyanvip.cn/uploads/file1593136576126.png', '.11rem', '')
          template(slot="no")
            +simage('https://oss.kaoyanvip.cn/uploads/file1593136480771.png', '.11rem', '')
        div.ui-pos-a-full.ui-cus-pointer(@click="isOpenAction = !isOpenAction")
    div
      conpons-select
      div(style="height: .2rem")
    .app-line(style="background-color: #ebebeb;")
    .ui-flex.ui-items-center.ui-justify-between(style='height: .48rem')
      .address-table-item.ui-center
        .bs-text-color-black.ui-bold.text-sz-200 其他优惠
      .address-table-item.ui-center
        .text-color-danger.text-sz-200.ui-bold -￥40

mixin address-form-paymethod()
  .ui-flex.ui-items-start.ui-justify-between
    +address-header("支付方式", "")
  div(style="height: .25rem")
  div.ui-flex.ui-items-center
    div.ui-flex.ui-items-center
      u-trigger-radio(style="margin-left: .1rem", :checked="payMethod === '1'", @oncheck="oncheck('1')")
        template(slot="yes")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592622928064.png', '.16rem')
        template(slot="no")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592090029015.png', '.16rem')
      div(style="width: .16rem") &nbsp;
      +simage('https://oss.kaoyanvip.cn/uploads/file1592622783580.png', '.4rem')
      div.text-color-gray.text-sz-100(style="margin-left: .1rem") 微信支付
    div.ui-flex.ui-items-center
      u-trigger-radio(style="margin-left: .88rem", :checked="payMethod === '2'", @oncheck="oncheck('2')")
        template(slot="yes")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592622928064.png', '.16rem')
        template(slot="no")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592090029015.png', '.16rem')
      div(style="width: .16rem") &nbsp;
      +simage('https://oss.kaoyanvip.cn/uploads/file1592622845721.png', '.4rem')
      div.text-color-gray.text-sz-100(style="margin-left: .1rem") 支付宝支付

mixin address-form-payresult()
  .ui-flex.ui-items-start.ui-justify-between
    +address-header("付款信息", "")
  div(style="height: .25rem")
  div.ui-flex.ui-items-center.ui-line-height-1
    div(style="width: .4rem") &nbsp;
    .bs-text-color-black.ui-bold.text-sz-200 商品金额
    div(style="width: .4rem") &nbsp;
    .text-color-danger.text-sz-200.ui-bold 11600
  div(style="height: .25rem")
  div.ui-flex.ui-items-center.ui-line-height-1
    div(style="width: .4rem") &nbsp;
    .bs-text-color-black.ui-bold.text-sz-200 优惠金额
    div(style="width: .4rem") &nbsp;
    .text-color-danger.text-sz-200.ui-bold -￥40
  div(style="height: .25rem")


style.
  .submit-btn {
    width: 2rem;
    height: 0.5rem;
    line-height: .45rem;
    border-radius: 0.02rem;
  }

template#address-form-app-tpl
  div
    +address-list-form()
    div(style="height: .5rem")
    +address-form-good()
    div(style="height: .5rem")
    +address-form-coupon()
    div(style="height: .5rem")
    +address-form-paymethod()
    div(style="height: .5rem")
    +address-form-payresult()
    .app-line
    div(style="height: .2rem")
    .ui-flex.ui-items-center
      u-trigger-radio(:checked="isConfirm", @oncheck="handleIsConfirm", @onnocheck="handleIsConfirm")
        template(slot="yes")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592625113317.png', '.16rem')
        template(slot="no")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592625125927.png', '.16rem')
      div(style="width: .1rem") &nbsp;
      div
        .text-sz-200.text-color-gray 阅读并同意
      div.ui-relative
        .text-sz-200.text-color-primary 《售后政策》
        a.ui-pos-a-full(href="")
    div(style="height: .1rem")
    .ui-flex.ui-items-center.ui-justify-between
      div(style="width: .1rem") &nbsp;
      .ui-flex.ui-items-center
        .bs-text-color-black.ui-bold.text-sz-100 实付款：
        .text-color-danger.text-sz-600.ui-bold ￥9999.00
        div(style="width: .4rem") &nbsp;
        .btn.btn-danger.submit-btn
          .text-sz-700 提交订单

style.
  .coupons-select {
    /*width: 1099px;*/
    /*height: 228px;*/
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 235, 235, 1);
  }

  .coupons-select__navs {
    background-color: #F6F8FB;
    height: .36rem;
  }
  .coupons-select__nav {
    width: 1.2rem;
    height: 100%;
  }
  .coupons-select__nav.active {
    background-color: #ffffff;
    color: #494FF5;
  }
  .coupons-select__content {
    padding: .3rem .2rem;
    box-sizing: border-box;
  }
  .coupons-select-items {
    margin-left: -.15rem;
    margin-right: -.15rem;
  }
  .coupons-select-items > * {
    float: left;
    margin-left: .15rem;
    margin-right: .15rem;
  }

style.
  .coupon-select-item {
    width: 2.4rem;
  }
  .coupon-select-item__h {
    padding: .14rem .14rem;
    padding-bottom: 0;
    height: .72rem;
  }
  .coupon-select-item__s {
    margin-top: .1rem;
    margin-bottom: .1rem;
    line-height: 1;
    padding-left: 1em;
    box-sizing: border-box;
  }
  .coupon-select-item.default {
    height: 1.5rem;
    background-image: url("https://oss.kaoyanvip.cn/uploads/file1593134142506.png");
    background-size: 100%;
  }
  .coupon-select-item.default.selected {
    background-image: url("https://oss.kaoyanvip.cn/uploads/file1593135601397.png");
  }
  .coupon-select-item.default .coupon-select-item__h1 {
    color: #FF7033;
  }
  .coupon-select-item.default .coupon-select-item__h2 {
    color: #1D2125;
  }

  .coupon-select-item.blocked {
    background-image: url("https://oss.kaoyanvip.cn/uploads/file1593135751431.png");
    background-size: 100%;
    height: 1.7rem;
  }
  .coupon-select-item.blocked.selected {
    background-image: url("https://oss.kaoyanvip.cn/uploads/file1593135751431.png");
  }

  .coupon-select-item.blocked .coupon-select-item__h1 {
    color: #949494;
  }

  .coupon-select-item.blocked .coupon-select-item__h2 {
    color: #949494;
  }

mixin coupon-select-item()
  .coupon-select-item.ui-relative&attributes(attributes)
    if block
      block
    .coupon-select-item__h
      div.ui-flex.ui-items-end.ui-line-height-1.coupon-select-item__h1
        div.text-sz-500 ￥
        div(style="width: .01rem") &nbsp;
        div.text-sz-600 300
        div(style="width: .1rem") &nbsp;
        div.text-sz-100 满1000立减
      div(style="height: .06rem")
      div.ui-flex.ui-items-end.ui-line-height-1.coupon-select-item__h2
        div.text-sz-200 蜕换班优惠券
    .coupon-select-item__b
      div.ui-flex.ui-items-end.text-sz-100.text-color-gray.coupon-select-item__s
        div 有效时间：
        div.ui-flex-1.ui-truncate 2019.08.02-2019.05.26
      div.ui-flex.ui-items-end.text-sz-100.text-color-gray.coupon-select-item__s
        div 适用范围：
        div.ui-flex-1.ui-truncate 指定部分类目课程：
      div.ui-flex.ui-items-end.text-sz-100.text-color-gray.coupon-select-item__s
        div 使用说明：
        div.ui-flex-1.ui-truncate 我是使用说明呀我是使用说我是使用说明呀我是使用说
      div.ui-flex.ui-items-end.text-sz-100.text-color-orange.coupon-select-item__s(v-if="itemState === 'blocked'")
        div 不可用原因：
        div.ui-flex-1.ui-truncate 我是使用说明呀我是使用说我是使用说明呀我是使用说


template#conpons-select-tpl
  div.coupons-select
    .ui-flex.ui-items-center.ui-justify-start.coupons-select__navs.bs-text-color-black
      .ui-flex.ui-items-center.ui-justify-center.coupons-select__nav.ui-cus-pointer(
        :class="{'active': isActivetab(1)}", @click="setActivetab(1)")
         .text-sz-200 可使用
      .ui-flex.ui-items-center.ui-justify-center.coupons-select__nav.ui-cus-pointer(
        :class="{'active': isActivetab(2)}", @click="setActivetab(2)")
         .text-sz-200 不可使用
    .coupons-select__content
      .ui-clearfix.coupons-select-items
        +coupon-select-item()(
          :class="{[itemState]: true, 'selected': isSelectedItemIndex(1)}")
          div.ui-pos-a-full.ui-cus-pointer(@click="setSelectedItemIndex(1)")
        +coupon-select-item()(
          :class="{[itemState]: true, 'selected': isSelectedItemIndex(2)}")
          div.ui-pos-a-full.ui-cus-pointer(@click="setSelectedItemIndex(2)")
        +coupon-select-item()(
          :class="{[itemState]: true, 'selected': isSelectedItemIndex(3)}")
          div.ui-pos-a-full.ui-cus-pointer(@click="setSelectedItemIndex(3)")
        +coupon-select-item()(
          :class="{[itemState]: true, 'selected': isSelectedItemIndex(4)}")
          div.ui-pos-a-full.ui-cus-pointer(@click="setSelectedItemIndex(4)")


template#address-form-tpl
  address-form-app

#address-form


